<template>
  <div>
    <!-- 下载条 -->
    <div v-if="this.$store.state.exist">
      <download-bar></download-bar>
      <div id="commentContent" class="comment">
        <div class="title" v-if="!ENV.app">
          {{this.$store.state.res.title}}
        </div>
        <focus-bar showTime></focus-bar>
        <div class="cover-box">
          <img :src="fileUrlParse(this.$store.state.res.bigcover || this.$store.state.res.cover)" alt="" class="cover-img" data-type="preview">
        </div>
        <div class="content" v-html="this.$store.state.content.html" v-lazy-container="{ selector: 'img' }" @click="openClick($event)">
        </div>
        <div class="discuss" v-for="(item,key) in this.$store.state.discuss" :key="key">
          <div class="discuss-content">
            <div class="avatar" v-lazy:background-image="fileUrlParse(item.avatar)"></div>
            <div class="info">
              <div class="info-up">
                <span class="nickname">{{item.nickname}}</span>
                <!-- <span class="time">{{formatTime(item.createTime,'yy.mm.dd')}}</span> -->
              </div>
              <div v-if="item.type===0">
                <!-- 文字链接 -->
                <div class="link" v-if="item.weblink" v-html="item.newText">
                </div>
                <div class="text" v-else>
                  {{ item.text }}
                </div>
              </div>
              <div v-else-if="item.type===1">
                <!-- 图片 -->
                <img v-if="ENV.app" class="image" :src="defaultImg" v-lazy="fileUrlParse(item.image.link)" data-type="preview" :style="{height: item.image.height * 73 / item.image.width + 'vw'}">
                <img v-else class="image" :src="defaultImg" v-lazy="fileUrlParse(item.image.link)" data-type="preview" :style="{height: item.image.height * 73 / item.image.width + 'vw'}">
              </div>
              <div v-else-if="item.type===2">
                <!-- 视频 -->
                <div v-if="ENV.app" class="video" @click="openClick($event)" :data-uid="item.video.src" :data-vid="item.video.vid" :style="{background: 'url('+item.video.imageUrl+') no-repeat center','background-size':'cover'}">
                  <div class="play-icon" :data-uid="item.video.src" :data-vid="item.video.vid"></div>
                </div>
                <video v-else class="video-out" :src="item.video.src" preload="auto" style="object-fit:fill" controls :poster="item.video.imageUrl" playsinline="true" webkit-playsinline="true">
                     </video>
              </div>
              <div v-else-if="item.type===3">
                <!-- 帖子 -->
                <div class="feed" @click="tofeed(item.feed.feedId)">
                  <img class="feed-img" v-lazy:background-image="fileUrlParse(item.feed.imageUrl)">
                  <div class="feed-info">
                    <div class="feed-title">{{ item.feed.title }}</div>
                    <div class="feed-summary">{{ item.feed.summary }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="line"></div>
        </div>
        <div v-if="this.$store.state.end_html" class="content" v-lazy-container="{ selector: 'img' }" v-html="this.$store.state.content.end_html" @click="openClick($event)"></div>
        <author-bar></author-bar>
      </div>
      <!-- 阅读 喜欢 -->
      <like-bar class="like-bar"></like-bar>
      <!-- 留言板 -->
      <message-board></message-board>
      <feed-list :subjectList="hotSubjects"></feed-list>
      <!-- 底部Bar -->
      <foot-bar></foot-bar>
      <!-- 作者-->
      <preview-list :preview-src="preSrc" :preview-show="preShow" v-on:preview-show="listenToMyChild"></preview-list>
    </div>
    <Notfound v-else :isDelete="this.$store.state.res.bool_delete"></Notfound>
  </div>
</template>

<script>
  import {
    makeFileUrl,
    getCommonTime,
    appPlayVideo,
    tabImg,
    wxShareConfig
  } from '../../../utils'
  import {
    mapState,
    mapActions
  } from "vuex";
  import Notfound from '../../../components/notfound'
  import FeedList from '../../../components/feedList'
  import DownloadBar from '../../../components/downloadBar'
  import FocusBar from '../../../components/focusBar'
  import LikeBar from '../../../components/likeBar'
  import MessageBoard from '../../../components/messageBoard'
  import FootBar from '../../../components/footBar'
  import AuthorBar from '../../../components/authorBar'
  import PreviewList from '../../../components/previewList'
  
  export default {
    name: "commentIndex",
    components: {
      Notfound,
      FeedList,
      DownloadBar,
      FocusBar,
      LikeBar,
      MessageBoard,
      FootBar,
      AuthorBar,
      PreviewList
    },
    data() {
      return {
        defaultImg: "",
        preSrc: "",
        preShow: false
      }
    },
    created() {},
    computed: {
      ...mapState("common", {
        hotSubjects: state => state.hotSubjects,
      })
    },
    beforeMount() {
      this.$store.commit("GET_VERSION");
      this.$store.commit("SET_ENTER_TIME", Date.now());
      // 存会话 h5Adid
      if (this.$store.state.h5Adid) {
        Cookies.set("h5Adid", this.$store.state.h5Adid);
      } else {
        Cookies.set("h5Adid", "");
      }
  
    },
    async mounted() {
 
      console.log('params.id:', this.$route.params.id)
      if (this.$route.params.id) {
        let params = {
          subjectid: this.$route.params.id
        }
        if (this.$route.query.udid && this.$route.query.sto) {
          params['share_udid'] = this.$route.query.udid;
          params['sto'] = this.$route.query.sto;
        }
        await this.fetch_content(params)
        this.$store.dispatch('wx_config');
        this.getHotSubjects();
        this.$preview.init('#commentContent');
        console.info("mapstate",mapState)
      }
    },
    watch: {
      '$route' (to, from) {
        this.$router.go(0);
      }
    },
    methods: {
      ...mapActions("common", [
        "getHotSubjects",
        "fetch_content"
      ]),
  
      fileUrlParse(url, type, size) {
        return makeFileUrl(url, type, size);
      },
      // formatTime(time, type) {
      //   return getCommonTime(time, type);
      // },
      openClick(event) {
        const target = event.target;
        console.log("openClick", target.dataset);
        if (target.dataset.vid && target.dataset.uid) {
          // TJ.playVideo({url:target.dataset.uid})
          appPlayVideo(
            target.dataset.uid,
            target.dataset.vid
          );
        }
      },
      tofeed(fid) {
        if (ENV.app) {
          location.href = `closer://feed/${fid}`;
        } else {
          this.$router.push({
            path: `/feed/${fid}?type=2`
          });
        }
      },
      listenToMyChild(somedata) {
        this.preShow = somedata;
      },
    }
  }
</script>

<style lang="less" scoped>
  .comment {
    padding: 0 40pr 0 40pr;
    .title {
      margin: 50pr 0 40pr 0pr;
      font-size: 44pr;
      line-height: 60pr;
      color: #4b4945;
    }
    .cover-box {
      margin: 30pr auto;
      border-radius: 10pr;
      overflow: hidden;
      .cover-img {
        width: 100%;
      }
    }
    .content {
      margin-top: 30pr;
    }
    .discuss {
      margin-top: 60pr;
      .discuss-content {
        display: flex;
        flex-direction: row;
        .avatar {
          margin: 6pr 20pr 0 0;
          width: 68pr;
          height: 68pr;
          border-radius: 68pr;
          background-size: cover;
        }
        .info {
          display: flex;
          max-width: 600pr;
          flex-direction: column;
          .info-up {
            color: #94928E;
            font-size: 24pr;
            margin-bottom: 16pr;
            .time {
              float: right;
            }
          }
          .link {
            color: #507CAF;
            font-size: 32pr;
            width: 582pr;
            height: 132pr;
          }
          .text {
            font-size: 32pr;
            color: #4B4945;
            width: 582pr;
          }
          .image {
            width: 580pr;
          }
          .feed {
            width: 578pr;
            height: 126pr;
            background: #F8F8F8;
            border-radius: 10px;
            border: 1px solid #D7D7D9;
            display: flex;
            flex-direction: row;
            .feed-img {
              margin: 20pr 0 20pr 20pr;
              width: 86pr;
              height: 86pr;
              border-radius: 10pr;
              background-size: cover;
              background-position: 50%;
            }
            .feed-info {
              margin: 22pr 10pr 0 28pr;
              display: flex;
              flex-direction: column;
              .feed-title {
                width: 412pr;
                height: 44pr;
                line-height: 44pr;
                color: #4B4945;
                font-size: 32pr;
                overflow: hidden;
              }
              .feed-summary {
                width: 412pr;
                height: 30pr;
                color: #94928E;
                line-height: 30pr;
                font-size: 24pr;
                overflow: hidden;
              }
            }
          }
          .video {
            width: 580pr;
            height: 326pr;
            border-radius: 3px;
            background-color: rgba(0, 0, 0, .8);
            overflow: hidden;
            .play-icon {
              background: url("../../../assets/images/play.png");
              background-size: cover;
              width: 120pr;
              height: 120pr;
              margin: 103pr 230pr 103pr 230pr;
            }
          }
          .video-out {
            width: 100%;
            height: auto;
            position: relative;
          }
        }
      }
      .line {
        width: 670pr;
        height: 2pr;
        background: #F3F3F3;
        margin: 32pr 40pr 24pr 40pr;
      }
    }
    .discuss-end-tag {
      margin-top: 20pr;
    }
  }
</style>
